<template>
  <!-- 审核数据 -->
  <h-modal class="event-modal" v-model.lazy="show" title="审核数据" @submit="submit">
    <div style="text-align: right;color: #1F3B8A;margin-right: 50px;font-size: 16px;cursor: pointer;" @click="showHistory = true">
      手工追加历史记录 <a-icon type="right"></a-icon>
    </div>
    <br>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <!-- <a-col :span="12">
          <a-form-model-item label="标题" prop="title">
            <a-input v-model.lazy="form.title" :maxLength="50" placeholder="标题"></a-input>
          </a-form-model-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-model-item label="舆情数据数量" prop="publicOpinionNum">
            <a-input-number style="width: 100%" v-model.lazy="form.publicOpinionNum" placeholder="舆情数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="app数据数量" prop="app">
            <a-input-number style="width: 100%" v-model.lazy="form.app" placeholder="app数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="微信数据数量" prop="weChat">
            <a-input-number style="width: 100%" v-model.lazy="form.weChat" placeholder="微信数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="纸媒数据数量" prop="print">
            <a-input-number style="width: 100%" v-model.lazy="form.print" placeholder="纸媒数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="问答数据数量" prop="answer">
            <a-input-number style="width: 100%" v-model.lazy="form.answer" placeholder="问答数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="评论数据数量" prop="comments">
            <a-input-number style="width: 100%" v-model.lazy="form.comments" placeholder="评论数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="新闻数据数量" prop="news">
            <a-input-number style="width: 100%" v-model.lazy="form.news" placeholder="新闻数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="论坛数据数量" prop="bbs">
            <a-input-number style="width: 100%" v-model.lazy="form.bbs" placeholder="论坛数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="微博数据数量" prop="weibo">
            <a-input-number style="width: 100%" v-model.lazy="form.weibo" placeholder="微博数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="博客数据数量" prop="blog">
            <a-input-number style="width: 100%" v-model.lazy="form.blog" placeholder="博客数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="视频数据数量" prop="video">
            <a-input-number style="width: 100%" v-model.lazy="form.video" placeholder="视频数据数量"></a-input-number>
          </a-form-model-item>
        </a-col>

      </a-row>

    </a-form-model>
    <a-modal title="手工追加历史记录" v-model="showHistory" width="1000px">
      <h-table
        ref="htableView"
        @init="getRecordByEventId"
        :config="config">
        <template slot="content" slot-scope="{text}">
          <a-row>
            <a-col :span="8" v-for="(item, i) in text.split('，')" :key="i">{{ item }}</a-col>
          </a-row>
        </template>
      </h-table>
      <template slot="footer">
        <a-button type="primary" @click="showHistory = false">确定</a-button>
      </template>
    </a-modal>
  </h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line no-unused-vars
import { addPublicOpinionData, updatePublicOpinionData, getPublicOpinionData, getRecordByEventId } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';
import UploadImageMutil from '@/components/UploadImageMutil';
// import { v4 } from 'uuid';

const defaultForm = {

};

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    readId: {
      type: String,
      default: ''
    }
  },
  components: {
    UploadImageMutil
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {

        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    },
    dept(val) {
      this.form.departIdList = val.join(',');
    }
  },
  data() {
    return {
      moment,
      showHistory: false,
      type: 'add',
      reload: true,
      show: false,
      deptArr: [],
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          x: 750
        },
        columns: [
          {
            align: 'center',
            title: '时间',
            dataIndex: 'createTime',
            width: 160
          },
          {
            align: 'center',
            title: '操作人',
            dataIndex: 'createBy',
            width: 120
          },
          {
            align: 'left',
            title: '操作内容',
            dataIndex: 'content',
            scopedSlots: { customRender: 'content' }
          }
        ],
        pagination: false
      },
      dept: [],
      form: cloneDeep(defaultForm),
      historyList: [],
      rules: {
        title: [{ required: true, message: '请输入' }],
        publicOpinionNum: [{ required: true, message: '请输入' }],
        app: [{ required: true, message: '请输入' }],
        weChat: [{ required: true, message: '请输入' }],
        print: [{ required: true, message: '请输入' }],
        answer: [{ required: true, message: '请输入' }],
        comments: [{ required: true, message: '请输入' }],
        news: [{ required: true, message: '请输入' }],
        bbs: [{ required: true, message: '请输入' }],
        weibo: [{ required: true, message: '请输入' }],
        blog: [{ required: true, message: '请输入' }],
        video: [{ required: true, message: '请输入' }]
      }
    };
  },
  created() {

  },
  methods: {
    edit(form) {
      this.type = 'edit';
      this.form = form;
    },
    add() {
      this.type = 'add';
      this.getRecordByEventId();
      // getPublicOpinionData({
      //   eventId: this.id
      // }).then(res => {
      //   this.form = res.data || cloneDeep(defaultForm);
      //   if (res.data) {
      //     this.type = 'edit';
      //   }
      // });
    },
    getRecordByEventId() {
      getRecordByEventId({
        eventId: this.id
      }).then(res => {
        this.config.dataSource = res.data.map((e, i) => {
          return {
            ...e,
            id: i
          };
        });
      });
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addPublicOpinionData({ ...this.form, eventId: this.id }).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
          });
          } else if (this.type == 'edit') {
            updatePublicOpinionData({ ...this.form }).then(res => {
            this.$message.success('修改成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
          });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getImg(img) {
      this.$set(this.form, 'img', img);
    }
  }
};
</script>

<style>

</style>
